<template>
  <mu-container>
    <mu-appbar style="width: 100%;" title="Demo"></mu-appbar>
    <mu-form ref="form" :model="proj" class="mu-demo-form">
      <mu-form-item label="项目名称" prop="name">
        <mu-text-field v-model="proj.name" prop="name"></mu-text-field>
      </mu-form-item>
      <mu-form-item label="项目地址" prop="url">
        <mu-text-field v-model="proj.url" prop="url"></mu-text-field>
      </mu-form-item>
      <mu-form-item label="平台地址" prop="platUrl">
        <mu-text-field v-model="transferUrl" prop="platUrl"></mu-text-field>
      </mu-form-item>
      <mu-form-item>
        <mu-button color="primary" @click="addDevClick">添加</mu-button>
        <mu-button color="primary" @click="rmDevClick">删除</mu-button>
        <mu-button type="rest">重置</mu-button>
      </mu-form-item>
      <mu-form-item>
        <div class="mu-form-item-label">扫码添加项目</div>
        <div class="qr">
          <vue-qr :text="devAdd" :size="640"></vue-qr>
        </div>
      </mu-form-item>
      <mu-form-item>
        <div class="mu-form-item-label">扫码删除项目</div>
        <div class="qr">
          <vue-qr :text="devRm" :size="640"></vue-qr>
        </div>
      </mu-form-item>
      <mu-form-item>
        <div class="mu-form-item-label">扫码开发设置</div>
        <div class="qr">
          <vue-qr :text="devUri" :size="640"></vue-qr>
        </div>
      </mu-form-item>
    </mu-form>
  </mu-container>
</template>

<script>
  import VueQr from 'vue-qr'
  export default {
    components: {
      VueQr
    },
    data() {
      return {
        proj: {},
        transferUrl: '',
        devUri: 'uri,/pages/dev',
      }
    },
    computed: {
      devAdd() {
        return 'dev,add' + ',' + this.proj.url + ',' + this.proj.name
      },
      devRm() {
        return 'dev,rm' + ',' + this.proj.name
      },
    },
    created() {
      var href = window.location.href;
      var i = href.indexOf('#')
      if (i > 0) {
        href = href.substr(0, i) + '#/pages/chooseWay'

      } else {
        href = '#/pages/chooseWay'
      }

      this.proj = {
        name: '测试项目',
        url: href,
      }

      if(href.startsWith('https')) {
        this.transferUrl = 'https://open.dev.yiyiny.com/plt-client/#/pages/transfer'

      } else {
        this.transferUrl = 'http://open.dev.yiyiny.com/plt-client/#/pages/transfer'
      }

      //this.transferUrl = 'http://192.168.77.149:8080/plt-client/#/pages/transfer'
      //this.transferUrl = 'http://127.0.0.1:8080/plt-client/#/pages/transfer'
    },
    methods: {
      addDevClick() {
        var href = this.transferUrl + '?t=dev,add,' + encodeURIComponent(this.proj.url + ',' + this.proj.name)
        //window.open(href, '_blank')
        location.href = href
      },
      rmDevClick() {
        var href = this.transferUrl + '?t=dev,rm,' + encodeURIComponent(this.proj.name)
        //window.open(href, '_blank')
        location.href = href
      },
    }
  }
</script>

<style>
  .qr img {
    margin-top: 20px;
    max-width: 80%;
    min-width: 300px;
  }

  .mu-form-item-label {
    width: auto !important;
  }

  .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .mu-demo-form {
    width: 90%;
    max-width: 460px;
    margin: 10% auto;
  }

  .mu-form-item-label {
    float: left;
    width: 25%;
    display: inline;
    font-size: 1.25rem;
    text-align: left;
  }

  .mu-form-item-content {
    float: left;
    display: inline;
  }

  .qr {
    margin-bottom: 200px;
  }
</style>
